<template>
	<div>
		<el-form-item :label="title" :prop="prop">
			<div v-for="(item,index) in list" class="flex justify-between align-center">
				<el-input class="flex-grow" clearable v-model.trim="list[index]" :placeholder="placeholder" />
				<i :class="[index==0?'text-gray':'text-red','text-xxl margin-left-xs el-icon-remove-outline']" @click.stop="remove(index)"></i>
				<i class="text-green text-xxl margin-left-xs el-icon-circle-plus-outline" @click.stop="add(index)"></i>
			</div>
		</el-form-item>
	</div>
</template>

<script>
	export default {
		name: 'InputGroup',
		// beforeRouteLeave(to, from, next) {
		// 	this.$destroy();
		// 	next();
		// },
		beforeDestroy() {},
		props: {
			title: {
				type: String,
				default: ''
			},
			prop: {
				type: String,
				default: ''
			},
			placeholder: {
				type: String,
				default: ''
			},
			list: {
				type: Array,
				default: () => ([''])
			}
		},
		methods:{
			remove(index){
				const that = this 
				if(index > 0){
					that.list.splice(index, 1)
				}
			},
			add(index){
				const that = this 
				that.list.splice(index+1, 0 , '')
			},
		}
	}
</script>

<style>
</style>
